<template>
  <el-container>
    <el-header style="height: 100%">
      <div class="pd-10">
        <el-row :gutter="10">
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>总消息数</p>
                <p>{{ ArticleCount }}条</p>
              </div>
            </a>
          </el-col>
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>昨日发布</p>
                <p>{{ ArticleCountYesterdayRegister }}条</p>
              </div>
            </a>
          </el-col>
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>禁用消息条数</p>
                <p>{{ ArticleDisableCount }}条</p>
              </div>
            </a>
          </el-col>
        </el-row>
      </div>

      <div class="pd-10">
        <el-input style="width: 200px" suffix-icon="el-icon-edit" placeholder="请输入标题"
                  v-model="articleTitle"></el-input>
        <el-select class="ml-5" filterable clearable v-for="item in sysCategoryList " v-model="articleCategoryId"
                   placeholder="消息类型">
          <el-option :label="item.sysCategoryName" :value="item.sysCategoryId"></el-option>
        </el-select>
        <el-date-picker
            class="ml-5"
            v-model="value2"
            type="daterange"
            align="center"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
        </el-date-picker>
        <el-button class="ml-5" icon="el-icon-search" type="primary" @click="load">搜索</el-button>
        <el-button class="ml-5" icon="el-icon-edit" type="warning" @click="reset">重置</el-button>
        <el-button class="ml-5" icon="el-icon-circle-plus-outline" type="primary" @click="insertArticle">新增消息
        </el-button>
      </div>
    </el-header>
    <el-main style="height: 600px;border-radius: 5px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
      <el-row v-loading="loading">
        <el-col :span="6" v-for="(item, index) in articleList" :key="index" :offset="index%3 > 0 ? 2 : 0">
          <el-card style="margin: 10px" :body-style="{ padding: '0px' }">
            <img v-if="item.articleCover != null && item.articleCover!='' " :src="$ysyApi+item.articleCover"
                 class="image">
            <img v-if="item.articleCover == null || item.articleCover==''" src="../../assets/imageNull.png" class="image">
            <div style="padding: 15px;">
              <span>{{ item.articleTitle }}</span>
              <div class="bottom clearfix">
                <time class="time">{{ item.createDatetime }}</time>
                <el-button @click="goto(item.articleId)" type="text" class="button">详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

    <el-footer>
      <div class="pd-10">
        <!--          current-page: 当前的页码
                      page-size: 每页的个数
        -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[20 ,40, 80, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-footer>

  </el-container>
</template>

<script>
export default {
  name: "Article",
  data() {
    return {
      loginStatus: true,
      loading: true,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      ArticleCount: 0,
      ArticleCountYesterdayRegister: 0,
      ArticleDisableCount: 0,
      articleTitle: '',
      articleCategoryId: '',
      sysCategoryList: [],
      articleList: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value2: ''
    };
  },
  created() {
    this.load()
    this.getSysCategoryAll()
    this.FindArticleCountYesterdayRegister()
    this.FindArticleCount()
    this.FindArticleDisableCount()
  },
  methods: {
    //修改每页的条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    //修改页码
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    //搜索重置
    reset() {
      this.sysCategoryName = ""
      this.sysCategoryScopeAction = ""
      this.value2 = ''
      this.load()
    },
    load() {
      this.loading = true
      this.$axios({
        url: this.$api.FindArticle,
        method: 'get',
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          articleTitle: this.articleTitle,
          articleCategoryId: this.articleCategoryId,
          startTime: this.value2[0],
          endTime: this.value2[1]
        }
      }).then(res => {
        this.total = res.data.total
        this.articleList = res.data.records
        this.loading = false
      })
    },
    insertArticle() {
      this.$router.push({
        path: "article/insertArticle"
      })
    },
    getSysCategoryAll() {
      this.$axios({
        url: this.$api.FindSysCategoryAll,
        method: 'get',
        params: {
          sysCategoryScopeAction: '消息'
        }
      }).then(res => {
        this.sysCategoryList = res.data
      })
    },
    goto(articleId) {
      this.$router.push({
        path: "article/articleDetails",
        query: {
          articleId: articleId
        }
      })
    },
    FindArticleCountYesterdayRegister() {
      this.$axios({
        url: this.$api.FindArticleCountYesterdayRegister,
        method: 'get'
      }).then(res => {
        this.ArticleCountYesterdayRegister = res.data
      })
    },
    FindArticleDisableCount() {
      this.$axios({
        url: this.$api.FindArticleDisableCount,
        method: 'get'
      }).then(res => {
        this.ArticleDisableCount = res.data
      })
    },
    FindArticleCount() {
      this.$axios({
        url: this.$api.FindArticleCount,
        method: 'get'
      }).then(res => {
        this.ArticleCount = res.data
      })
    },
  }
}
</script>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>